<template>
  <div class style="padding:35px">
    <el-form size="mini" :model="editForm" :rules="rules" ref="form" label-width="80px">
      <el-row>
        <el-col :span="8">
          <my-form-item label="真实姓名">
            <el-input v-model="editForm.realName" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="职员编码">
            <el-input v-model="editForm.userCode" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="性别">
            <el-select v-model="editForm.sex" autocomplete="off" style="width: 269px;">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </my-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <my-form-item label="证件类型">
            <el-input v-model="editForm.identificationType" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="证件号码">
            <el-input v-model="editForm.identificationNumber" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="出生日期">
            <el-date-picker
              style="width: 269px;"
              v-model="editForm.birthday"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            ></el-date-picker>
          </my-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <my-form-item label="家庭住址">
            <el-input v-model="editForm.adress" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="邮政编码">
            <el-input v-model="editForm.postcode" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="职务">
            <el-input v-model="editForm.userPost" autocomplete="off" style="width: 269px;"></el-input>
          </my-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <my-form-item label="职称">
            <el-input v-model="editForm.title" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="职员类别">
            <el-input v-model="editForm.categoryStaff" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="学校">
            <el-input v-model="editForm.school" autocomplete="off" style="width: 269px;"></el-input>
          </my-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <my-form-item label="最高学历">
            <el-input v-model="editForm.highEducation" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="职员属性">
            <el-input v-model="editForm.staffAttribute" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="固定电话">
            <el-input v-model="editForm.telephone" autocomplete="off" style="width: 269px;"></el-input>
          </my-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <my-form-item label="移动电话">
            <el-input v-model="editForm.mobile" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="电子邮箱">
            <el-input v-model="editForm.email" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="QQ号码">
            <el-input v-model="editForm.qqNumber" autocomplete="off" style="width: 269px;"></el-input>
          </my-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <my-form-item label="微信号">
            <el-input v-model="editForm.wechatNumber" autocomplete="off"></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="建档人">
            <el-input v-model="editForm.createUserName" autocomplete="off" disabled></el-input>
          </my-form-item>
        </el-col>
        <el-col :span="8">
          <my-form-item label="备注">
            <el-input
              v-model="editForm.remark"
             
              autocomplete="off"
              style="width: 269px;"
            ></el-input>
          </my-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <my-form-item label="同时登录 ">
            <el-select v-model="editForm.enableParallelLogin" style="width: 275px;">
              <el-option label="允许" value="1"></el-option>
              <el-option label="不允许" value="0"></el-option>
            </el-select>
          </my-form-item>
        </el-col>
      </el-row>
       <my-form-item style="text-align:right;">
         <el-button size="mini"  type="primary" @click="submitForm('ruleForm')">提交</el-button>
         </my-form-item>
    </el-form>
  </div>
</template>

<script>
import { filterUsertype } from "@/filters/usersFilter";
import {
  addUserRole,
  getList,
  deleteItem,
  addItem,
  editItem,
  getRoleListByUserId
} from "./function";
import { getList as glbOptions } from "../organ/organ";
import { getList as getRoleList } from "../roles/function";
export default {
  data() {
    return {
      qxUserId: "",
      checkbox: {
        checkedRoles: [],
        Roles: []
      },
      dialogEditVisible: false,
      dialogQsVisible: false,
      formLabelWidth: "80px",
      tableData: [],

      rules: {
        username: [
          { required: true, message: "用户名不能为空！", trigger: "blur" }
        ]
      },
      searchForm: {
        username: "",
        usertype: "",
        organ: ""
      },
      options: [],
      cascaderProps: {
        value: "organCode",
        label: "organName",
        children: "children"
      },
      editForm: {
        userStatus: "", //启用状态
        id: "",
        username: "",
        realName: "",
        mobile: "",
        telephone: "",
        email: "",
        // createTime:'',
        tokenCreateTime: "",
        token: "",
        userType: "",
        organCode: "",
        organName: "",
        deptId: "",
        deptName: "",
        organId: "",
        enabledState: "",
        userCode: "",
        simpleName: "",
        sex: "",
        identificationType: "",
        identificationNumber: "",
        birthday: "",
        adress: "",
        postcode: "",
        userPost: "",
        title: "",
        categoryStaff: "",
        school: "",
        highEducation: "",
        staffAttribute: "",
        qqNumber: "",
        remark: "",
        loginAccount: "",
        confirmPassword: "",
        outageDate: "",
        roleAttribute: "",
        roleId: "",
        wechatNumber: "",
        createUserName: "",
        enableParallelLogin: ""
      },
      total: 0,
      pageSize: 10,
      currentPage: 1
    };
  },
  computed: {},
  mounted() {
    this.init();
    this.getGlbOptions();
  },
  methods: {
    getRoleListByUserId() {
      let params = {
        userId: this.qxUserId
      };
      getRoleListByUserId(params).then(res => {
        console.log(res);
        if (res.retHead.code == "0000000") {
          let list = [];
          if (res.retBody.length > 0) {
            res.retBody.forEach(i => {
              list.push(i.id);
            });
          }
          this.checkbox.checkedRoles = list;
        }
      });
    },
    getGlbOptions() {
      glbOptions().then(res => {
        console.log(res);
        if (res.retHead.code == "0000000") {
          this.options = res.retBody;
        }
      });
    },

    init() {
      let user = JSON.parse(sessionStorage.getItem("user"));
      let params = {
        id: user.id
      };
      this.$api.formPost("/api/auth/sysuser/doGetUser", params).then(res => {
        if (res.retHead.code === "0000000") {
          console.log(res.retBody);
          for (let key in this.editForm) {
            this.editForm[key] = res.retBody[key] || "";
          }
        }
      });
    },
    submitForm() {
      console.log(this.editForm);
      console.log(this.editForm.organCode);
      this.editForm.organCode = this.editForm.organCode[
        this.editForm.organCode.length - 1
      ];
      let params = this.editForm;
      this.$refs.form.validate(valid => {
        if (valid) {
          editItem(params).then(res => {
            if (res.retHead.code == "0000000") {
              this.init();
              this.$message.success("修改成功！");
            } else {
              this.$message.error("修改失败！");
            }
          });
        }
      });
    }
    // resetForm(formName) {
    //   this.init()
    // }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.btns {
  text-align: right;
}
</style>
